
import './AnnexDetails.scss'
import { useState } from 'react'
import { useMount } from 'ahooks'
import { Result, Spin } from 'antd'
import { useRequest } from 'alova/client'
import { Player, BigPlayButton } from 'video-react'


import { Http } from '../../Utils/Api'
import { ContentTypeMapping } from '../../Config/theme'
import { getFileTypeFromUrl } from '../../Utils'



const imgMapping = ['image/png', 'image/jpeg', 'image/gif']
const videoMapping = ['video/mp4']
const pdfMapping = ['application/pdf']
const excelMapping = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']




const AnnexDetails = ({ data, Off }) => {
    const { send } = useRequest(params => Http({ url: 'getAttachmentFile', params }), { immediate: false })

    const [url, setUrl] = useState()
    const [type, setType] = useState()


    useMount(() => {
        const { attachmentUuid, fileType, fileUrl } = data
        if (fileType === 0) {
            setUrl(fileUrl)
            setType(getFileTypeFromUrl(fileUrl))
        } else {
            send({ AttachmentUuid: attachmentUuid }).then(res => {
                const { blob, contentType } = res
                console.log('文件流', res)
                if (imgMapping.includes(contentType)) {
                    setType('image')
                    setUrl(URL.createObjectURL(blob))
                } else if (videoMapping.includes(contentType)) {
                    setType('video')
                    setUrl(URL.createObjectURL(blob))
                } else if (excelMapping.includes(contentType)) {
                    console.log('excel类型')
                } else {
                    console.log('下载类型')
                }
            })
        }
    })

    return (
        <div className='AnnexDetails'>
            {type === 'image' && <img className='Image' src={url} alt="" />}
            {type === 'video' &&
                <Player fluid={false} width={'100%'} height={'100%'} playsInline src={url}>
                    <BigPlayButton position="center" />
                </Player>
            }
            {type === 'edge' && <iframe src={url} scrolling="no" frameBorder="0" allowFullScreen={true} />}
            {type === 'not' && <Result status="500" title="暂不支持此类型文件" />}
            {!type && <Spin />}
        </div>
    )
};

export default AnnexDetails;